<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            canvas{
               /* 在样式中只能改变canvas的大小，并不能改变它的分辨率 */
               /* width: 300px;
               height: 300px; */
               background: pink;
            }
        </style>
    </head>

    <body>
        <canvas class="canvas" width="600" height="600"></canvas>
        <script>
            // 获取canvas元素
            const canvas = document.querySelector('.canvas');
            // 获取获取 2D 绘图上下文
            const ctx = canvas.getContext('2d');
            // 创建图片对象
            const img =new Image();
            // 设置图片路径
            img.src = './assets/img1.jpg';
            // 图片加载完成之后，在canvas上绘制图片
            // 使用 onload 事件确保图片加载完成后再绘制是很重要的，否则可能会出现图片无法显示的情况
            img.onload = function(){
                // 在canvas上绘制图片,从坐标 (0,0) 开始绘制
                // 图片会被缩放为 300x300 像素大小
                //虽然 canvas 的大小是 600x600，但图片被设置为绘制成 300x300 的大小
                ctx.drawImage(img,0,0,300,300);
            }
        </script>
    </body>
</html>
   

